<template>
    <div class="wrapper">
        <div class="titel-row">
            <div class="home-icon">
                <img src="../../assets/inquiryRegister/home.png" alt>
            </div>
            <div class="title">证照库</div>
        </div>
        <div class="zz-content">
            <div class="item1">
                <div class="input-row">
                    <input v-model="keyword" placeholder="请输入关键字..." type="text">
                    <div class="search-btn-row">
                        <button @click="reset('keyword')" class="reset-btn">重置</button>
                        <button @click="search" class="search-btn">
                            <img src="../../assets/search.png" alt="">
                        </button>
                    </div>
                </div>
                <div class="outer-wrapper">
                    <div v-for="(item,index) in cardTypeList" :key="index" class="classify-row">
                        <div @click="onSelectType(item,index)" :class="['inner',index === currentIndex?'active':'']">
                            <div :class="['icon','iconfont',item.dictDataDesc || 'i-yyzz']"></div>
                            <div>{{item.dictDataName}}</div>
                        </div>
                    </div>
                    <div v-if="!cardTypeList.length" class="no-data">
                        <img src="../../assets/no-data.png" alt="">
                    </div>
                </div>
            </div>
            <div class="item2">
                <div class="list-header">
                    <div class="list-header-wrapper">
                        <span class="list-header-title">
                            <span>{{currentTitle}}</span>
                        </span>
                        <div class="list-search-input">
                            <div class="input-row">
                                <input v-model="listKeywords" placeholder="请输入证件所有者关键词..." type="text">
                                <div class="search-btn-row">
                                    <button @click="reset('listKeywords')" class="reset-btn">重置</button>
                                    <button @click="onSearchList" class="search-btn">
                                        <img src="../../assets/search.png" alt="">
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <ul class="zz-list-ul">
                    <li class="list" v-for="(item,index) in list" :key="index">
                        <div class="list-container">
                            <div class="list-img-wrapper">
                                <div class="mask">
                                    <img @click = "onShowImg(item.filePath)" src="../../assets/permitDepot/amp.png" alt="">
                                    <img @click = "onDownload(item)" src="../../assets/permitDepot/down.png" alt="">
                                </div>
                                <img :src="item.filePath || defaultImg" :onerror = "onErrorImg" alt="">
                            </div>
                            <div class="list-info">
                                <div class="list-info-row">
                                    <label class="info-label">所有者：</label>
                                    <div class="cell-label">
                                        <div class="text-over">
                                            <span :title = "item.owner">{{item.owner || "无"}}</span>
                                        </div>
                                    </div>
                                </div>
                                <div class="list-info-row">
                                    <label class="info-label">联系人：</label>
                                    <div class="cell-label">
                                        <div class="text-over">
                                            <span :title = "item.contacts">{{item.contacts || "无"}}</span>
                                        </div>
                                    </div>
                                </div>
                                <div class="list-info-row">
                                    <label class="info-label">有效期：</label>
                                    <div class="cell-label">
                                        <div class="text-over">
                                            <span :title = "getTimeStr(item.startTime,'yyyy-MM-dd')+'至'+getTimeStr(item.endTime,'yyyy-MM-dd')">{{getTimeStr(item.startTime,"yyyy-MM-dd")}}</span>
                                            <span>至</span>
                                            <span>{{getTimeStr(item.endTime,"yyyy-MM-dd")}}</span>

                                        </div>
                                    </div>
                                </div>
                                <div class="list-info-row">
                                    <label class="info-label">联系电话：</label>
                                    <div class="cell-label">
                                        <div class="text-over">
                                            <span :title = "item.telNo">{{item.telNo || "无"}}</span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                    </li>
                </ul>
                <div v-if="!list.length" class="no-data">
                    <img src="../../assets/no-data.png" alt="">
                </div>
                <div class="pager">
				    <el-pagination 
                        background 
                        @current-change="handleCurrentChange" 
                        :current-page="listRequest.pageNum" 
                        :page-size="8" 
                        prev-text="上一页" next-text="下一页" layout="total, prev, pager, next" :total="total"></el-pagination>
			    </div>
            </div>
        </div>
        <div v-if = "!!currentImg" @click = "toggleMaskImg" class="img-mask">
            <img :src="currentImg" alt="">
        </div>
    </div>
</template>

<script>
import Pubsub from "../../utils/pubsub";
import { getTimeStr } from "../../utils";

const defaultImg = require("../../assets/permitDepot/no-img.png");

import { getPermitList,findByDictCode,downloadFile } from "../../config/api.js";
export default {
    data() {
        return {
            onErrorImg:'this.src="' + require('../../assets/permitDepot/no-img.png') + '"'  ,//图片加载错误/404时
            cardTypeList: [],
            currentIndex: 0, //记录当前选中的下标
            keyword: "",
            listKeywords: "", //列表关键字
            currentTitle:"",//当前选中的title
            list: [], //列表数据源
            total:0,//证件库总条数
            listRequest:{
                pageNum:1,
                pageSize:8,
                type:"",
                keyword:"",
            },
            getTimeStr,
            defaultImg,
            currentImg:"",//当前放大的图片
        };
    },
    methods: {
           /**
         * 获取证件类型
         */
        getCardType(re = {}) {
            let defaultRequest = {dictCode:"cardType"};
            let reqeust = Object.assign(defaultRequest,re);
            findByDictCode(reqeust).then((result)=>{
                let data = result.data || [];
                this.cardTypeList = data;
                if(data.length){
                    let dictDataName = data[this.currentIndex].dictDataName;
                    let dictDataCode = data[this.currentIndex].dictDataCode;
                    this.currentTitle = dictDataName;
                    console.log(dictDataCode,"dictDataCode")
                    this.listRequest.type = dictDataCode;
                    this.getList({type:dictDataCode});
                }
            })
        },
        /**
         * 获取证件列表
         */
        getList(re = {}){
            getPermitList(this.listRequest).then((result = {})=>{
                let rows = result.rows || [];
                let total = result.total || 0;
                this.list = rows;
                this.total = total;
            })
        },
        /**
         * 分页
         */
        handleCurrentChange(pageNum) {
            this.listRequest.pageNum = pageNum;
            this.getList();
        },
        /**
         * 选择证件类型
         */
        onSelectType(item, index) {
            this.currentIndex = index;
            this.currentTitle = item.dictDataName;
            this.listRequest.pageNum = 1;
            this.listRequest.type = item.dictDataCode;
            this.getList()
        },
        /**
         * 重置
         */
        reset(type) {
            this[type] = "";
            if(type === "keyword"){//重置并筛选证件类型
                this.getCardType({keyword:""});
            }else{
                this.listRequest.keyword = "";
                this.listRequest.pageNum = 1;
                this.getList();
            }
        },
        /**
         * 证件类型搜索
         */
        search() {
            this.getCardType({keyword:this.keyword});
        },
        /**
         * 搜索列表
         */
        onSearchList() {
            this.listRequest.keyword = this.listKeywords;
            this.listRequest.pageNum = 1;
            this.getList();
        },
        onShowImg(url){
            this.currentImg = url;
        },
         /**
         * 关闭放大图片
         */
        toggleMaskImg(){
          this.currentImg = "";
        },
        /**
         * 下载图片
         */
        onDownload(item){
            downloadFile({
                fileId:item.fileId,
                fileName:`${this.currentTitle}_${item.owner}`
            })
        }
     
    },
    created() {
        this.getCardType();
    }
};
</script>

<style lang = "scss" scoped>
@import "../../css/unifyAcceptWorkbench.scss";

.wrapper {
    margin: 20px;
    background: #fff;
    display: flex;
    flex-direction: column;
    flex: 1;
    /* height: 100%; */
}
.titel-row {
    display: flex;
    align-items: center;
    border-bottom: 1px solid #e5e5e5;
    .home-icon {
        height: 50px;
        width: 50px;
        background: #1a36a9;
        margin-right: 20px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .title {
        font-size: 22px;
        color: #272c67;
    }
}
.zz-content {
    display: flex;
    flex: 1;
    height: 100%;
    /* padding-bottom: 100px; */
    background: #fff;
    .item1 {
        width: 410px;
        box-sizing: border-box;
        display: flex;
        flex-direction: column;
        padding: 20px 15px;
        border-right: 1px solid #e5e5e5;
        /* height: 100%; */
        .outer-wrapper {
            /* height: 100%; */
            overflow: auto;
        }
        .classify-row {
            width: 33.33%;
            box-sizing: border-box;
            padding: 10px;
            cursor: pointer;
            display: inline-block;
            .inner {
                height: 100px;
                background: #f5f5f5;
                display: flex;
                flex-direction: column;
                align-items: center;
                padding: 15px;
                box-sizing: border-box;
                text-align: center;
                &.active {
                    background: #e7ecff;
                    color: #1a36a9;
                }
            }
            .icon {
                font-size: 28px;
                margin-bottom: 5px;
            }
        }
    }
    .item2 {
        flex: 1;
        padding: 0 20px 30px 20px;
        display: flex;
        flex-direction: column;
    }
}
.pager {
    margin-top: 30px;
    display: flex;
    justify-content: flex-end;
}
.input-row {
    /* flex: 1; */
    display: flex;
    position: relative;
    padding: 0 10px;
    margin-bottom: 10px;
    input {
        flex: 1;
        font-size: 16px;
        padding-left: 20px;
        padding-right: 105px;
        height: 36px;
    }
    .search-btn-row {
        position: absolute;
        display: flex;
        align-items: center;
        right: 10px;
    }
    .reset-btn {
        color: #c13530;
        padding: 0 20px;
        opacity: 0.8;
    }
    .search-btn {
        background: #822424;
        height: 42px;
        padding: 0 12px;
        img {
            height: 25px;
            width: 25px;
        }
        &:active {
            opacity: 0.8;
        }
    }
}
.list-header {
    padding: 0 10px;
    &-wrapper {
        border-bottom: 1px solid #eee;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 10px 0 5px 0;
    }
    &-title {
        padding: 0 15px;
        position: relative;
        font-size: 16px;
        &:after {
            position: absolute;
            display: block;
            content: "";
            width: 100%;
            height: 2px;
            background: #1a36a9;
            left: 0;
            bottom: -16px;
        }
    }
}
.list-search-input {
    width: 500px;
    .input-row {
        margin-bottom: 0;
        padding: 0;
    }
    .search-btn-row {
        right: 0;
    }
}
.zz-list-ul {
    overflow: auto;
    white-space: wrap;
    .list {
        display: inline-block;
        width: 25%;
        box-sizing: border-box;
        padding: 10px;
        &-container {
            box-shadow: 0px 1px 3px 0px rgba(153, 153, 153, 0.48);
        }
        &-img-wrapper {
            background: #f8f8f8;
            /* padding: 25px 30px; */
            position: relative;
            .mask{
                opacity: 0;
                position: absolute;
                top:0;
                left:0;
                bottom:0;
                right:0;
                background: rgba(0,0,0,.6);
                transition: .3s all ease-in-out;
                cursor: pointer;
                display: flex;
                align-items: center;
                justify-content: center;
                img{
                    height:7vmin;
                    width:7vmin;
                    &:first-child{
                        margin-right: 20px;
                    }
                }
            }
            &:hover{
                .mask{
                    opacity: 1;
                }
            }
            img {
                width: 100%;
            }
        }
        .list-info {
            padding: 15px;
            &-row {
                margin-bottom: 5px;
                display: flex;
                &:last-child {
                    margin-bottom: 0;
                }
                .info-label {
                    display: inline-block;
                    text-align: right;
                    color:#666;
                }
            }
        }
    }
}
.img-mask {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.8);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    img {
        max-width: 60vw;
        max-height: 60vh;
    }
}
</style>
